<div class="file-all">
  <div class="head">
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" (click)="isFolderVisible = true">
      <i nz-icon nzType="folder-add" nzTheme="outline"></i>
      <span>创建目录</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" (click)="uploadFile()">
      <i nz-icon nzType="upload" nzTheme="outline"></i>
      <span>上传文件</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true"
            nzShape="round" (click)="showMusicPlay=true;musicPlayerComponent.isPlayList = true">
      <i nz-icon nzType="play-circle" nzTheme="outline"></i>
      <span>音乐播放器</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round"
            (click)="this.uploadFileComponent.openHandle()">
      <i nz-icon [nzType]="'sync'" [nzSpin]="commonTool.notNull(uploadFileComponent.uploadInfos)"></i>
      <span>上传中</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true"
            nzShape="round" (click)="uploadFolder()">
      <i nz-icon nzType="upload" nzTheme="outline"></i>
      <span>上传文件夹</span>
    </button>
    <button nz-dropdown [nzDropdownMenu]="menu" nz-button nzType="primary" [nzSize]="'small'" [nzGhost]="true"
            nzShape="round">
      <i nz-icon nzType="setting" nzTheme="fill"></i>
      <span>操作</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" [disabled]="isChecked"
            (click)="share();isShareVisible=true">
      <i nz-icon nzType="share-alt" nzTheme="outline"></i>
      <span>分享</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" [disabled]="isChecked"
            (click)="delete(checkedModel)">
      <i nz-icon nzType="delete" nzTheme="outline"></i>
      <span>批量删除</span>
    </button>
    <button nz-button nzType="primary" nzSize="small" [nzGhost]="true" nzShape="round" (click)="revert()"
            [disabled]="currentObj.id=='root'">
      <i nz-icon nzType="rollback" nzTheme="outline"></i>
      <span>返回上级</span>
    </button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item (click)="shear();isCopy=true">复制</li>
        <li nz-menu-item (click)="shear();isCopy=false">剪切</li>
        <li nz-menu-item (click)="paste(isCopy)">粘贴</li>
        <li nz-menu-item (click)="batchPlay()">添加到播放列表</li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="label">
    <nz-breadcrumb nzSeparator=">">
      <nz-breadcrumb-item (click)="label({id:'root'},0)">
        <a>全部文件</a>
      </nz-breadcrumb-item>
      <ng-container *ngFor="let data of labelModel;let i=index">
        <ng-container *ngIf="i!=labelModel.length-1">
          <nz-breadcrumb-item (click)="label(data,i)">
            <a>{{data.name}}</a>
          </nz-breadcrumb-item>
        </ng-container>
        <ng-container *ngIf="i==labelModel.length-1">
          <nz-breadcrumb-item>
            {{data.name}}
          </nz-breadcrumb-item>
        </ng-container>
      </ng-container>
    </nz-breadcrumb>
  </div>
  <div class="content">
    <nz-table #dataTable [nzPageSize]="100000000" [nzData]="tableModel" [nzShowPagination]="false" nzSize="small">
      <thead (nzSortChange)="sort($event,name,size,updateTime)" nzSingleSort>
      <tr class="thead-tr">
        <th nzShowCheckbox [(nzChecked)]="isAllChecked" (nzCheckedChange)="checkAll($event)" class="th-td-1">
        </th>
        <th nzShowSort nzSortKey="name" class="th-td-5" #name>名称</th>
        <th nzShowSort nzSortKey="size" class="th-td-3" #size>大小</th>
        <th nzShowSort nzSortKey="updateTime" class="th-td-4" #updateTime>修改日期</th>
        <th class="th-td-2">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of dataTable.data;let i = index" (click)="trClick($event,data)">
        <td nzShowCheckbox [(nzChecked)]="checkedModel[data.id]" (nzCheckedChange)="checkboxChoice(data)"
            class="th-td-1">
          <i *ngIf="!data['isFile']" nz-icon nzType="folder" nzTheme="outline"></i>
          <i *ngIf="data['isFile']" nz-icon nzType="file" nzTheme="outline"></i>
        </td>
        <td class="th-td-5"
            title="{{data.name+ '('+(data.desc ? data.desc : '')+')'}}">{{data.name}}
          <span style="color: red">{{data.desc ? '(' + (data.desc ? data.desc : '') + ')' : ''}}</span>
        </td>
        <td class="th-td-3">{{data.size|space:''}}</td>
        <td class="th-td-4">{{ data['updateTime'] | date:'yyyy-MM-dd hh:mm:ss'}}</td>
        <td class="th-td-2">
          <ng-container *ngIf="data['isFile']">
            <a target="_blank" style="display: inline-block" (click)="downloadFile(data['id'])">下载</a>
            <ng-container *ngIf="getSuffix(data.name)==='.mp4'">
              <a style="margin-left: 5px;display: inline-block" (click)="videoPlay(data)">播放</a>
            </ng-container>
            <ng-container *ngIf="getSuffix(data.name)==='.mp3'">
              <a class="play" (click)="videoMusic(data,true)">播放</a>
            </ng-container>
            <ng-container
              *ngIf="getSuffix(data.name)==='.jpg'||getSuffix(data.name)==='.png'||getSuffix(data.name)==='.jpeg'||getSuffix(data.name)==='.gif'">
              <a style="margin-left: 5px;display: inline-block" (click)="openPicture(data)">打开</a>
            </ng-container>
            <ng-container *ngIf="isDev">
              <a style="margin-left: 5px;display: inline-block" (click)="createCdn(data)">cdn</a>
            </ng-container>
          </ng-container>
          <a style="margin-left: 5px;display: inline-block" (click)="edit($event,data)">编辑</a>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
  <div class='footer'>
    <div class='footer-head'>精彩电影推荐</div>
    <div class='footer-content'>
      <div class='footer-content__play'>
        <ng-container *ngFor="let item of movieData">
          <img class='recommend-element' src="{{item.path}}" alt="加载失败" (click)="playMovie(item.origin)"/>
        </ng-container>
      </div>
    </div>
  </div>
  <!--  创建目录-->
  <nz-modal [(nzVisible)]="isFolderVisible" nzTitle="创建目录" (nzOnCancel)="isFolderVisible = false"
            (nzOnOk)="createFolderOk(this.currentObj)" [nzOkDisabled]="folderOkDisabled">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="email">文件夹名称</nz-form-label>
      <nz-form-control nzErrorTip='目录名称，不能为空，不能包含：/\:*?"<>|' [nzValidateStatus]="folderValidateStatus">
        <input nz-input placeholder="目录名称" (keyup)="validateFolderInput(folderInfo.name)"
               [(ngModel)]="folderInfo.name"/>
      </nz-form-control>
    </nz-form-item>
  </nz-modal>
  <!--  修改名称-->
  <nz-modal [(nzVisible)]="isUpdateVisible" nzTitle="编辑" (nzOnCancel)="isUpdateVisible = false"
            (nzOnOk)="updateFileFolder()" [nzOkDisabled]="updateOkDisabled">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="email">名称</nz-form-label>
      <nz-form-control nzErrorTip='名称，不能为空，不能包含：/\:*?"<>|' [nzValidateStatus]="updateValidateStatus">
        <input nz-input placeholder="请输入" (keyup)="validateUpdateInput(fileName)" [(ngModel)]="fileName"/>
      </nz-form-control>
    </nz-form-item>
  </nz-modal>
  <!--  分享-->
  <nz-modal [(nzVisible)]="isShareVisible" nzTitle="分享" (nzOnCancel)="fileShareCancel()"
            (nzOnOk)="fileShare(this.currentObj)"
            [nzOkDisabled]="updateShareOkDisabled">
    <nz-form-item>
      <nz-form-label nzRequired nzFor="email" style="width: 80px;">提取码</nz-form-label>
      <nz-form-control nzErrorTip='提取码' [nzValidateStatus]="fileTypeStatus">
        <nz-select nzShowSearch nzAllowClear
                   nzPlaceHolder="请选择"
                   [(ngModel)]="needCode" style="width:100%"
                   (ngModelChange)="fileTypeNotNull(needCode)">
          <nz-option nzLabel="需要" nzValue="true"></nz-option>
          <nz-option nzLabel="不需要" nzValue="false"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzRequired nzFor="email" style="width: 80px;">有效期</nz-form-label>
      <nz-form-control nzErrorTip='文件类型不能为空' [nzValidateStatus]="validTimeStatus">
        <nz-select nzShowSearch nzAllowClear
                   nzPlaceHolder="请选择"
                   [(ngModel)]="validTime" style="width:100%"
                   (ngModelChange)="validTimeNotNull(validTime)">
          <nz-option nzLabel="永久有效" nzValue="0"></nz-option>
          <nz-option nzLabel="一天" nzValue="86400000"></nz-option>
          <nz-option nzLabel="七天" nzValue="604800000"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </nz-modal>
  <!--  url地址-->
  <nz-modal [(nzVisible)]="isUrlVisible"
            nzTitle="下载地址"
            (nzOnCancel)="isUrlVisible = false"
            nzOkText="复制"
            (nzOnOk)="isUrlVisible = false;copy('地址:'+shareUrl+(drawCode?'提取码:'+drawCode:''))">
    <span>地址：</span><a>{{shareUrl}}</a>
    <br/>
    <ng-container *ngIf="drawCode">
      <span>提取码：</span><a>{{drawCode}}</a>
    </ng-container>
  </nz-modal>

  <!--  url地址-->
  <nz-modal [(nzVisible)]="isDevVisible"
            nzTitle="下载地址"
            (nzOnCancel)="isDevVisible = false"
            nzOkText="复制"
            (nzOnOk)="isDevVisible = false;copy(devUrl)">
    <a>{{devUrl}}</a>
  </nz-modal>
  <!--  音乐播放器-->
  <nz-modal [(nzVisible)]="showMusicPlay"
            nzTitle="音乐播放器"
            [nzBodyStyle]="{padding:'10px'}"
            (nzOnCancel)="showMusicPlay = false"
            [nzMaskClosable]="false"
            [nzCancelText]="null"
            (nzOnOk)="showMusicPlay = false"
            nzOkText="后台播放">
    <app-music-player></app-music-player>
  </nz-modal>

  <!--  图片-->
  <nz-modal [(nzVisible)]="picturePlay"
            nzTitle="图片"
            (nzOnCancel)="picturePlay = false"
            nzOkText="关闭"
            (nzOnOk)="picturePlay = false;">
    <img src="{{pictureUrl}}" class="images"/>
  </nz-modal>
  <!--  视频-->
  <nz-modal [(nzVisible)]="showVideoPlay"
            nzTitle="视频"
            (nzOnCancel)="showVideoPlay = false"
            nzOkText="关闭"
            (nzOnOk)="showVideoPlay = false;">
    <video src="{{videoUrl}}" autoplay controls="controls" class="video" id='videoPlayer'>
      您的浏览器不支持 video 标签。
    </video>
  </nz-modal>

</div>
<app-upload-file></app-upload-file>

